<template>
  <div class="attributeDrawer-container" :class="[visible ? 'show' : 'hide']">
    <div class="attributeDrawer-body">
      <div class="header">
        属性<a-icon type="close" @click="handleClose()" />
      </div>
      <div class="body">
        <div class="screen-tabs">
          <div :class="activeIndex == 0 && 'active'" @click="handleModule(0)">
            基础属性
          </div>
          <div :class="activeIndex == 1 && 'active'" @click="handleModule(1)">
            扩展属性
          </div>
        </div>
        <div class="attribute-list custom-collapse-container">
          <a-spin :spinning="spinning">
            <a-empty :description="false" v-if="dataSoucre == 0" />
            <a-collapse v-model="activeKey" v-else>
              <a-collapse-panel
                :key="item.uuid"
                :show-arrow="false"
                v-for="item in dataSoucre"
              >
                <template slot="header">
                  <div
                    @click.stop
                    class="customize-text"
                    :header="item.group || item.extendParamGroupName"
                  ></div>
                </template>
                <template slot="extra">
                  <div class="customize-extra">
                    <div
                      class="icon"
                      :class="[activeKey.includes(item.uuid) && 'active']"
                    >
                      <a-icon type="down-circle" />
                    </div>
                  </div>
                </template>
                <div class="table-grid-container">
                  <div
                    class="grid-item"
                    :key="i"
                    v-for="(v, i) in item.data || []"
                  >
                    <div class="name">
                      {{ v.paramName || v.extendParamName }}
                    </div>
                    <div class="value">
                      {{ v.paramValue || v.extendParamValue }}
                    </div>
                  </div>
                </div>
              </a-collapse-panel>
            </a-collapse>
          </a-spin>
        </div>
        <div class="bottom-container">
          <a-button
            class="cu-btn-filter"
            @click="handelAttributeManage()"
            v-if="activeIndex == 1"
          >
            属性管理
          </a-button>
          <a-button
            class="cu-btn-primary"
            @click="handelExport()"
            :loading="loading"
            :disabled="dataSoucre.length > 0 ? false : true"
          >
            导出
          </a-button>
        </div>
      </div>
    </div>
    <addExtendAttributeModal
      :visible.sync="attributeModalVisible"
    ></addExtendAttributeModal>
  </div>
</template>

<script>
import addExtendAttributeModal from "./addExtendAttributeModal.vue";
import {
  getElementParam,
  getElementExtendParams,
  exportElementExcel,
  exportExtendExcel,
} from "@/api/bim";
import { downLoadFileByArraybuffer } from "@/utils/util";
export default {
  name: "attributeDrawer",
  inject: ["currentProject"],
  components: {
    addExtendAttributeModal,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    probeRet: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      activeIndex: 0,
      activeKey: [],
      spinning: false,
      attributeModalVisible: false,
      dataSoucre: [],
      loading: false,
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getBaseInfoData();
        } else {
          this.activeIndex = 0;
        }
      },
      immediate: true,
    },
  },
  methods: {
    handleModule(type) {
      this.activeIndex = type;
      this.getData();
    },

    handelAttributeManage() {
      this.attributeModalVisible = true;
    },

    getData() {
      if (this.activeIndex == 0) {
        this.getBaseInfoData();
      }
      if (this.activeIndex == 1) {
        this.getExtendData();
      }
    },

    //查询基础属性
    getBaseInfoData() {
      return new Promise((resolve, reject) => {
        let { dataSetId, elemId } = this.probeRet;
        if (!dataSetId) {
          this.dataSoucre = [];
          return;
        }
        this.spinning = true;
        getElementParam({
          childNodeId: elemId,
          dataSetId,
        })
          .then((res) => {
            let { data } = res;
            this.dataSoucre = data?.elementParams ?? [];
            this.dataSoucre.forEach((item) => {
              this.$set(item, "uuid", this._getUUID(32, 32));
              this.activeKey = this.dataSoucre.map((v) => v.uuid);
            });
            if (data.errMsg) {
              this.$message.warning(data.errMsg, 1.5);
            }
            resolve();
          })
          .catch((_) => {
            this.dataSoucre = [];
            reject();
          })
          .finally((_) => {
            this.spinning = false;
          });
      });
    },

    //查询扩展属性
    getExtendData() {
      return new Promise((resolve, reject) => {
        let { dataSetId, elemId } = this.probeRet;
        if (!dataSetId) {
          this.dataSoucre = [];
          return;
        }
        this.spinning = true;
        getElementExtendParams({
          elementIntId: elemId,
          dataSetId,
          extendParamGroupName: "",
        })
          .then((res) => {
            let { data } = res;
            this.dataSoucre = data?.data ?? [];
            this.dataSoucre.forEach((item) => {
              this.$set(item, "uuid", this._getUUID(32, 32));
              this.activeKey = this.dataSoucre.map((v) => v.uuid);
            });
            if (data.errMsg) {
              this.$message.warning(data.errMsg, 1.5);
            }
            resolve();
          })
          .catch((_) => {
            this.dataSoucre = [];
            reject();
          })
          .finally((_) => {
            this.spinning = false;
          });
      });
    },

    //导出
    handelExport() {
      switch (this.activeIndex) {
        case 0:
          this.exportBaseInfoExcel();
          break;
        case 1:
          this.exportExtendInfoExcel();
          break;
        default:
          break;
      }
    },

    //基础属性导出
    exportBaseInfoExcel() {
      let { dataSetId, elemId } = this.probeRet;
      if (!dataSetId) {
        return;
      }
      this.loading = true;
      exportElementExcel({
        childNodeId: elemId,
        dataSetId,
      })
        .then((data) => {
          downLoadFileByArraybuffer(data, "基础属性");
        })
        .catch((_) => {})
        .finally((_) => {
          this.loading = false;
        });
    },
    //扩展信息导出
    exportExtendInfoExcel() {
      let { dataSetId, elemId } = this.probeRet;
      if (!dataSetId) {
        return;
      }
      this.loading = true;
      exportExtendExcel({
        elementIntId: elemId,
        dataSetId,
        extendParamGroupName: "",
      })
        .then((data) => {
          downLoadFileByArraybuffer(data, "扩展属性");
        })
        .catch((_) => {})
        .finally((_) => {
          this.loading = false;
        });
    },

    //关闭
    handleClose() {
      this.activeIndex = 0;
      this.activeKey = [];
      this.spinning = false;
      this.attributeModalVisible = false;
      this.dataSoucre = [];
      this.loading = false;
      this.$emit("update:visible", false);
      this.$emit("close", false);
    },

    //指定长度和基数
    _getUUID(len, radix) {
      var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(
        ""
      );
      var uuid = [],
        i;
      radix = radix || chars.length;
      if (len) {
        for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
      } else {
        var r;
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
        uuid[14] = "4";
        for (i = 0; i < 36; i++) {
          if (!uuid[i]) {
            r = 0 | (Math.random() * 16);
            uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
          }
        }
      }
      return uuid.join("");
    },
  },
};
</script>

<style lang="less" scoped>
.attributeDrawer-container {
  position: absolute;
  width: 300px;
  height: 100%;
  top: 0;
  pointer-events: none;
  transition: 0.3s;
  right: 8px;
  box-sizing: border-box;
  padding: 16px 0 20px 0;
  z-index: 99;
  &.hide {
    right: -100%;
  }
  .attributeDrawer-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 6px;
    pointer-events: all;
    .header {
      flex-shrink: 0;
      height: 36px;
      background: #f0f0f0;
      border-radius: 6px 6px 0px 0px;
      border: 1px solid #d9d9d9;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 16px;
      font-size: 16px;
      color: #333333;
      position: relative;
      .anticon-close {
        color: #8c8c8c;
        font-size: 15px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
      }
    }
    .body {
      flex: 1;
      background: #fff;
      padding: 16px 0 0 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
      /deep/.ant-empty {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .screen-tabs {
        height: 30px;
        display: flex;
        margin: 0 16px 10px 16px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        position: relative;
        div {
          height: 100%;
          position: relative;
          cursor: pointer;
          overflow: hidden;
          &:not(:first-child) {
            margin-left: 32px;
          }
          &.active {
            color: #1677ff;
          }
        }
      }
      .attribute-list {
        flex: 1;
        overflow: auto;
        padding: 0 16px 0 16px;
        position: relative;
        &.custom-collapse-container {
          /deep/.ant-collapse {
            .ant-collapse-item {
              border: 0;
              margin-bottom: 8px;
              .ant-collapse-header {
                height: 32px;
                border-radius: 3px 3px 0px 0px;
                margin-right: 0;
                background: #f0f0f0;
                border-bottom: 1px solid #d9d9d9;
                .customize-text {
                  padding: 4px 10px !important;
                  &::before {
                    color: #333333;
                    font-size: 14px;
                    letter-spacing: 1px;
                  }
                }
                .customize-extra {
                  padding-right: 10px !important;
                  .anticon-down-circle {
                    font-size: 22px;
                    color: #8c8c8c;
                  }
                }
              }
              .ant-collapse-content {
                background-color: #ffffff;
              }
            }
          }
        }
        .table-grid-container {
          padding: 10px;
          border: 1px solid #f2f2f2;
          margin-bottom: 8px;
          .grid-item {
            box-sizing: border-box;
            display: flex;
            border: 1px solid #f2f2f2;
            border-bottom: 0;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 12px;
            color: #333333;
            letter-spacing: 1px;
            font-style: normal;
            text-transform: none;
            .name {
              width: 96px;
              padding: 6px 10px;
              background: #fafafa;
              border-right: 1px solid #f2f2f2;
              flex-shrink: 0;
            }
            .value {
              flex: 1;
              padding: 6px 10px;
              word-break: break-all;
            }
            &:last-of-type {
              border-bottom: 1px solid #f2f2f2;
            }
          }
        }
      }
      .bottom-container {
        border-top: 1px solid #f2f2f2;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 10px 0;
      }
    }
  }
}
</style>
